import { useState, useMemo, useEffect } from "react";
import styles from "./index.less";
import Navbar from "@/components/Navbar";
import api from "@/utils/api";
import { useParams } from "umi";
import Items from "./components/Items";
export default function Page() {
  const params = useParams();
  // 控制 排序的状态
  const [orderStatus, setOrderStatus] = useState({
    orderIndex: 0, // 0 销量 1价格 2新品
    upDown: 0, // 0 升序 1 降序
  });
  // 根据排序状态 定义 请求 排序字段 值
  const orderBy = useMemo(() => {
    let _orderBy = "ordersDown";
    switch (orderStatus.orderIndex) {
      case 0:
        _orderBy = "ordersDown";
        break;
      case 1:
        if (orderStatus.upDown === 0) {
          _orderBy = 'priceUp'
        } else {
          _orderBy = 'priceDown'
        }
        break;
      case 2:
        _orderBy = 'addedDown'
        break;
      default:
        break;
    }
    return _orderBy;
  }, [orderStatus]);
  // 点击切换排序状态
  const switchOrderStatus = (orderIndex: number) => {
    /* 
      现在的排序 是不是就是 要切换排序 
        是 切换升序和降序
        否 切换 该排序 （升序降序 根据需求定义 默认值）
    */
    let _orderStatus = {
      ...orderStatus,
    };
    if (orderStatus.orderIndex === orderIndex) {
      // 切花升序和降序
      if (_orderStatus.upDown === 0) {
        _orderStatus.upDown = 1;
      } else {
        _orderStatus.upDown = 0;
      }
    } else {
      // 切换 到 该 排序 且 定义升序和降序默认值 (根据实际业务需求)
      switch (orderIndex) {
        case 1: // 价格默认值 升序  其他是 降序
          _orderStatus = {
            orderIndex: orderIndex,
            upDown: 0,
          };
          break;
        default:
          _orderStatus = {
            orderIndex: orderIndex,
            upDown: 1,
          };
          break;
      }
    }
    setOrderStatus(_orderStatus);
  };
  const [items, setItems] = useState<Item[]>([]);
  const getItems = () => {
    api.getItems({
      categoryId: params.cateId,
      orderBy
    }).then(res => {
      if (res.data.code === 0) {
        setItems(res.data.data.result)
      }
    })
  }

  useEffect(() => {
    getItems()
  }, [orderBy])
  return (
    <>
      <Navbar title="商品列表" />
      <div className={styles["order-bar"]}>
        <div
          onClick={() => {
            switchOrderStatus(0);
          }}
          className={`order sale ${
            orderStatus.orderIndex === 0 ? "active" : ""
          }`}
        >
          销量
        </div>
        <div
          onClick={() => {
            switchOrderStatus(1);
          }}
          className={`order price ${
            orderStatus.orderIndex === 1 ? "active" : ""
          }`}
        >
          价格
          <div
            className={`triangle up ${
              orderStatus.orderIndex === 1 && orderStatus.upDown === 0
                ? "active"
                : ""
            }`}
          ></div>
          <div
            className={`triangle down ${
              orderStatus.orderIndex === 1 && orderStatus.upDown === 1
                ? "active"
                : ""
            }`}
          ></div>
        </div>
        <div
          onClick={() => {
            switchOrderStatus(2);
          }}
          className={`order new ${
            orderStatus.orderIndex === 2 ? "active" : ""
          }`}
        >
          新品
        </div>
      </div>
      <div className={styles['list-container']}>
        <Items items={items}/>
      </div>
    </>
  );
}
